<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="iconfont.css">
    <link rel="shortcut icon" href="../../../../favicon.ico" />
    <style type="text/css"></style>
    <title>目录</title>
</head>
<body >
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js "></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="index.js"></script>
    <div id="blue-line">
      <div id="title">
         <div id="main-logo" > <img src="../img/logo.png" alt=""></div>
          <span id="main-word">&nbsp;云淄</span>
      </div>
  <a href="../../../主页.html">  <ul id="min-box">
    <span id="left-img">&#xe691;</span>
      <span id="min-word">主页</span>
  </ul></a>
    <ul id="min-box-1" onclick="beopen4()">
      <span id="left-img">&#xe641;</span>
        <span id="min-word">管理</span>
        <span id="be-more-4">&#xe637;</span>
    </ul>
        <ul id="two-box-4">
          <a href=""><li id="two-word">档案编辑</li></a>
         <a href=""> <li id="two-word">管理审批</li></a>
          <a href=""><li id="two-word">黑名单</li></a>
    </ul>
    <ul id="min-box-2" onclick="beopen1()">
      <span id="left-img">&#xe7a4;</span>
        <span id="min-word">物品档案</span>
        <span id="be-more-0">&#xe637;</span>
    </ul>
          <ul id="two-box-0">
            <a href=""><li id="two-word">目录</li></a>
         <a href="./其他页面/物品档案/书籍简介/书籍简介.html"> <li id="two-word">查询</li></a>
 </ul>
    <ul id="min-box-3" onclick="beopen()" onfocus="tolook()">
      <span id="left-img">&#xe6f9;</span>
        <span id="min-word">物品交流</span>
        <span id="be-more-1">&#xe637;</span>
    </ul>
          <ul id="two-box-1">
               <a href=""><li id="two-word">预约</li></a>
               <a href=""><li id="two-word">借用</li></a>
              <a href=""> <li id="two-word">归还</li></a>
          </ul>
           <!-- 修改部分(将id:be-more改成了be-more-3;min-box的盒子后加了onclick="beopen3()"，也可以直接把这部分粘贴过去替代原有内容) -->
      <ul id="min-box-4" onclick="beopen3()">
        <span id="left-img">&#xe613;</span>
               <span id="min-word">统计分析</span>
               <span id="be-more-3">&#xe637;</span>
       </ul>
          <!-- 修改部分 -->
       <!-- 添加部分 -->
           <ul id="two-box-3">
           <a href=""><li id="two-word">统计分析</li></a>
           <a href=""><li id="two-word">统计报表</li></a>
           </ul>
        <!-- 添加部分 -->
       <ul id="min-box-5" onclick="beopen0()">
        <span id="left-img">&#xe690;</span>
               <span id="min-word">资产维修</span>
               <span id="be-more-2">&#xe637;</span>
       </ul> 
           <ul id="two-box-2">
               <a href=""><li id="two-word">维修申请</li></a>
               <a href=""><li id="two-word">报修处理</li></a>
           </ul>
              <a href="../../帮助/帮助.html">    <ul id="min-box-6">
                <span id="left-img">&#xea02;</span>
                        <span id="min-word">帮助</span>
               </ul></a>
               <a href="javascript:history.back(-1)"><img id="toback" src="../image/Log out.png" alt=""> </a>  
  </div>
      <!-- 上方导航栏 -->
      <div id="white-line">
         <!-- 右边各项 -->
        <img id="menu" src="../img/menu.png" alt="">
      <button class="sousuo"><span>&emsp; 目录 &emsp; </span></button> 
    
          <div id="head-img"> <span style="position: relative; top:4px;">头像</span></div>
          <span id="alarm">&#xe605;</span>
          <span id="set">&#xe51b;</span>

      </div>
 
           <!-- 修改内容  -->
            <!-- 下方主要板块 -->
            <div id="main-block">
              <table class="tables" style="border-radius:10px; border-left: none;border-right: none;"  cellspacing = "0">     
                   <thead>
                        <tr id="top-line">
                          <td id="top-word"  colspan=12>project</td>
                          <td id="top-word"  colspan=12>author</td>
                          <td id="top-word"  colspan=12>number</td>
                      </tr>
                    </thead>
                    <tbody id="app">
                      <tr id="top-line-1" v-for="item in message" >
                        <td id="line-word" colspan=12>{{item.name}}</td>
                        <td id="line-word" colspan=12>{{item.author}}</td>
                        <td id="line-word"  colspan=12>{{item.number}}</td>
                    </tr>
                    
                    </tbody>
              </table> 
          </div>
            <img style=" z-index: -1;;position: absolute;top:30px;left:300px;" id="return" src="../img/5.png" alt="">
    </div> 
     <script>
      var app=new Vue({
        el:"#app",
        data:{
          message:[ {
          name:"",
          author:"",
          number:"",
          token:"",
           }]
        },
        created(){
          this.token=localStorage.getItem('token');
        },
        mounted:function(){
            this.loading();
        },
        methods:{
             loading:function()
                    {               
                      var that=this;
                       axios.get("http://javahome1.natapp1.cc/Borrow/ShowBooksController").then
                      (function(response) {
                        console.log(response);
                        that.message = response.data  
                      },function(err){
                        console.log(err);
                      })
                    }
        }
      })
    </script> 
<!-- 修改内容 -->
</body>
</html>